import { useEffect, useRef } from 'react'

/**
 * @title 匹配``替换为标签
 * @description 正则匹配以[开头以]结尾不包含[]: str.match(/(?<=\[).*?(?=\])/g)
 * @description 正则匹配以[开头以]结尾包含[]: str.match(/\[.*?\]/g)
 * @description 正则匹配 {} 以及大括号中间的内容: str.match(/\{[^\{]+\}/g)
 * @param {string} className 
 */
export function useExplainCode(className: string = '') {
  const oCode = useRef<HTMLElement>(null);
  useEffect(() => {
    if (!oCode || !oCode.current) return;
    // replace() 方法通过用 newChar 字符替换字符串中出现的所有 searchChar 字符，并返回替换后的新字符串。
    const result = oCode.current.innerHTML.replace(/\`.*?\`/g, (value) => {
      const aValue = value.match(/(?<=\`).*?(?=\`)/g);
      if (!aValue) return value;
      return `<code class="code ${className}">` + aValue[0] + '</code>';
    });
    oCode.current.innerHTML = result;
  })
  return oCode;
}